{% extends '_base.html' %}
{% block active_home %} btn-primary {% endblock %}


{% block head %}
{{ super() }}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% endblock head %}


{% block content %}
<div class="row">
    <div class="col-2 c-col-2-5"> 
        <!-- 重构：使用扩展没啥必要，自己放张图片效果也是一样的。 --> 
        {% if user.avatar %} 
            <img src="{{ url_for('getfile', filename=user.avatar) }}" class="img-fluid rounded-circle" alt="头像" style="height: 175px; width: 175px;"> 
        {% else %} 
            <img src="{{ avatars.default() }}" class="img-fluid rounded-circle" alt="头像" style="height: 175px; width: 175px;"> 
        {% endif %} 
    </div>  
    <div class="col"> 
        {% if user %} 
            <h2>{{ user.name }} <small class="text-success">LV{{ level }}</small></h2>
            <h3>{{ user.exp }} 
                <small><small>总经验
                    <small> (下一级还需：{{ need_exp }})</small>
                </small></small>
            </h3>
        {% else %}
            <p>未登录</p>
        {% endif %} 
        <p>个人简介：{{ user.introduce }}</p>
        <p>
            邮箱：{{ user.email }}
            <a class="btn btn-secondary btn-right" href="{{ url_for('auth.upload_avatar') }}" role="button">上传头像</a>
            <a class="btn btn-success btn-right" href="{{ url_for('auth.modify') }}" role="button">修改信息</a>
        </p>
    </div>
</div>
<hr>
<!-- 数据表 小号展示 -->
<div class="row" style="height:30;"></div>
<div class="row">
    <div class="col-8">
        <style>
            .chart {
                width: 100%;
                height: 65vh;
            }
            @media screen and (max-width: 1000px) {
                .chart {
                    width: 95vw;
                    height: 34vh;
                }
            }
        </style>
        <div id="chart2" class="chart container-fluid pl-6 pr-0"></div>
        {% from 'data/#chart2.html' import chart2 %}
        {{ chart2() }}

        <div id="chart1" class="chart container-fluid pl-0"></div>
        {% from 'data/#chart1.html' import chart1 %}
        {{ chart1() }}
    </div>
    <!-- 排行榜 -->
    <div class="col">
        {% include 'auth/#rank.html' %}
    </div>
</div>

<script>
    // 上面一个图表的标题靠右会遮住排行榜
    function waitForChart() {
        var chartDom = document.getElementById('chart2');
        var myChart = echarts.getInstanceByDom(chartDom);
        
        if (myChart) {
            // 图表已渲染，隐藏标题
            myChart.setOption({
                title: {
                    show: false
                }
            });
        } else {
            // 图表还未渲染，100毫秒后再次检查
            setTimeout(waitForChart, 2500);
        }
    }
    // 开始检查
    waitForChart();
</script>
{% endblock %}
